<template>
    <div class="dormitory-building" ref="building">
        <el-form :inline="true" :model="searchForm" size="mini">
            <el-form-item label="性别">
                <template>
                    <el-select v-model="searchForm.gender" placeholder="请选择">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item label="类型">
                <el-input v-model="searchForm.type" placeholder="几人间"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-input v-model="searchForm.status" placeholder="是否可入住"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
                <el-button type="primary" @click="handleRefresh">刷新</el-button>
                <el-button type="primary" @click="handleCreate">新建</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                style="width: 100%; margin-bottom: 20px;"
                row-key="ukId"
                border
                default-expand-all
                stripe
                size="mini">
            <el-table-column
                    prop="code"
                    label="编码"
                    sortable
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="名称"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="gender"
                    label="学生性别"
                    sortable
                    width="100">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.gender == '1'" type="success" size="mini">男</el-tag>
                    <el-tag v-if="scope.row.gender == '0'" type="danger" size="mini">女</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    label="管理员"
                    sortable
                    width="100">
                <template slot-scope="scope">
                    <div v-if="scope.row.manages.length != 0" v-for="item in scope.row.manages">
                        {{item.username}}
                    </div>
                    <div v-if="scope.row.manages.length == 0">
                        <span>未分配</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    label="维修人员"
                    sortable
                    width="100">
                <template slot-scope="scope">
                    <div v-if="scope.row.repairs.length != 0" v-for="item in scope.row.repairs">
                        {{item.username}}
                    </div>
                    <div v-if="scope.row.repairs.length == 0">
                        <span>未分配</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="类型"
                    sortable
                    width="120">
                <template slot-scope="scope">
                    <el-tag type="success" size="mini">{{scope.row.type}}人间</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="100">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == '1'" type="success" size="mini">启用</el-tag>
                    <el-tag v-if="scope.row.status == '0'" type="danger" size="mini">停用</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="sort"
                    label="排序"
                    width="120">
            </el-table-column>
            <el-table-column
                    :formatter="dateFormatter"
                    prop="gmtCreate"
                    label="创建时间"
                    width="150">
            </el-table-column>
            <el-table-column
                    :formatter="dateFormatter"
                    prop="gmtModified"
                    label="修改时间"
                    width="150">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="*">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="bindUserEdit(scope.$index, scope.row)">分配管理人员
                    </el-button>
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <dormitory-pagination :parentMethod="listBuilding"
                              :pagination="this.$store.state.Navigation.pagination"></dormitory-pagination>
        <el-dialog title="宿舍楼管理" :visible.sync="dialogFormVisible" :close-on-click-modal="false" label-width="80px">
            <el-form ref="form" :model="buildingForm" label-width="80px">
                <el-form-item label="编码">
                    <el-input v-model="buildingForm.code"></el-input>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="buildingForm.name"></el-input>
                </el-form-item>
                <el-form-item label="居住性别">
                    <el-select v-model="buildingForm.gender" placeholder="请选择">
                        <el-option label="男" :value="1"></el-option>
                        <el-option label="女" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="几人间">
                    <el-input v-model="buildingForm.type"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="buildingForm.status" placeholder="请选择状态">
                        <el-option label="启用" :value="1"></el-option>
                        <el-option label="停用" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="buildingForm.sort" type="number" min="0" max="90000"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSave">保存</el-button>
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="分配管理员" :visible.sync="dialogFormUser" :close-on-click-modal="false" label-width="80px">
            <template>
                <el-form ref="buildingManageForm" :model="buildingManageForm" label-width="100px">
                    <el-form-item label="宿舍管理员">
                        <el-select v-model="buildingManageForm.manages" multiple placeholder="请选择宿舍管理员">
                            <el-option
                                    v-for="item in manageUserList"
                                    :key="item.ukId"
                                    :label="item.username"
                                    :value="item.ukId">
                                <span style="float: left">{{ item.username }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.userInfo.gender==0?"女":"男" }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="维修人员">
                        <el-select v-model="buildingManageForm.repairs" multiple placeholder="请选择维修人员">
                            <el-option
                                    v-for="item in repairUserList"
                                    :key="item.ukId"
                                    :label="item.username"
                                    :value="item.ukId">
                                <span style="float: left">{{ item.username }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.userInfo.gender }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleBindManage">确认</el-button>
                        <el-button @click="dialogFormUser = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-dialog>
    </div>
</template>

<script>

    import DormitoryPagination from "../../components/DormitoryPagination";

    import {
        listBuilding,
        updateBuilding,
        saveBuilding,
        deleteBuilding,
        bindBuildingUser,
        unbindBuildingUser
    } from "../../../../api/manage/building";
    import {listUser, listUserByCode,} from "../../../../api/platform/user";

    import PageSizeUtils from "../../../../utils/PageSizeUtils";

    export default {
        name: "Building",
        components: {DormitoryPagination,},
        data() {
            return {
                tableData: [],
                dialogFormVisible: false,
                dialogFormUser: false,
                dialogFormFaculty: false,
                buildingForm: {
                    code: "",
                    name: "",
                    gender: "",
                    type: "",
                    status: 1,
                    sort: 10000
                },
                buildingManageForm: {
                    buildingId: "",
                    manages: [],
                    repairs: []
                },
                searchForm: {
                    name: "",
                    gender: "",
                    type: "",
                    status: "",
                },
                isUpdate: false,
                allFaculty: [],
                hasBindFaculty: [],
                manageUserList: [],
                repairUserList: []
            };
        },

        methods: {
            listBuilding(current, size) {
                listBuilding(this.searchForm, current, size).then(response => {
                    this.tableData = response.data.buildings.records;
                    PageSizeUtils.setPagination(response.data.buildings)
                }).catch(error => {
                    console.log(error)
                })
            },
            handleCreate(index, row) {
                this.isUpdate = false
                this.buildingForm = {}
                this.dialogFormVisible = true;
            },
            handleEdit(index, row) {
                this.isUpdate = true
                this.buildingForm = row
                this.dialogFormVisible = true;
            },
            handleDelete(index, row) {
                this.deleteBuilding()(row.ukId).then(response => {
                    this.listBuilding(this.$store.state.Navigation.pagination.current,
                        this.$store.state.Navigation.pagination.size);
                }).catch(error => {
                    console.log(error)
                })
            },
            handleSearch() {
                this.listBuilding(this.$store.state.Navigation.pagination.current,
                    this.$store.state.Navigation.pagination.size);
            },
            handleRefresh() {
                this.listBuilding(this.$store.state.Navigation.pagination.current,
                    this.$store.state.Navigation.pagination.size);
            },
            handleReset() {
                this.searchForm = {}
            },
            handleSave() {
                saveBuilding(this.buildingForm).then(response => {
                    this.listBuilding(this.$store.state.Navigation.pagination.current,
                        this.$store.state.Navigation.pagination.size);
                    this.dialogFormVisible = false;
                }).catch(error => {
                    console.log(error)
                })
            },
            /*发生变化得一边当前value */
            handleBindManage() {
                /*绑定宿舍楼管理人员*/
                bindBuildingUser(this.buildingManageForm).then(response => {
                    this.dialogFormUser = false
                    this.listBuilding()
                }).catch(error => {
                    console.log(error)
                })
            },
            bindUserEdit(index, row) {
                this.buildingManageForm = {}
                this.buildingManageForm.buildingId = row.ukId;
                listUserByCode("manage").then(response => {
                    this.manageUserList = response.data.users
                })
                listUserByCode("repair").then(response => {
                    this.repairUserList = response.data.users
                })
                this.dialogFormUser = true;
            },
            dateFormatter(row, column, cellValue, index, type) {
                let replace = cellValue.replace("T", " ");
                return replace.substring(0, 19);
            },

        },
        created() {
            PageSizeUtils.setPagination({})
            this.listBuilding(this.$store.state.Navigation.pagination.current,
                this.$store.state.Navigation.pagination.size);
        }
    }
</script>

<style scoped>
    .dormitory-building {
        background-color: #ffffff;
        border: #ffffff 3px solid;
    }
</style>
